<!DOCTYPE html>
<html>
  <head>
    <title>image.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	var imgs=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];
	var index=0;
	function changeimage(){
		index++;
		if(index>=imgs.length){
					index=0;
		}
		nextimage();
	}
	function showimage(){
	
//	 for(var i=1;i<=imgs.length;i++) 无需使用FOR循环 只需调用就会自动执行
//	 	{
	 	
	 	//	window.setTimeout("changeimage()",1000);
	 		setInterval(function() {
	 			changeimage();
	 		}, 100);
	// 	}
	 	//window.setTimeout("changeimage()",1000);
	}
	function nextimage(){
	var imageobj=document.getElementById("displaydiv");
		document.getElementById("ima").src="image/"+imgs[index];
	}
	</script>
  </head>
  
  <body>
  <div id="displaydiv">
  	 <IMG SRC="image/1.jpg" id="ima">
  	
  </div>
  <input type="button" onclick="changeimage()" value="下一张"><br>
  <input type="button" onclick="showimage()" value="自动播放"><br>
  </body>
</html>
